/**
 * Created by douxin on 23/09/2016.
 */

import React from 'react';
import echarts from 'echarts';
import { getGoodsSoldStatisticData, removeBlankValue } from './StatisticService';

class GoodsStatisticBarChart extends React.Component {

    getOptions() {
        let data = removeBlankValue(getGoodsSoldStatisticData(this.props.trades));
        data = (data.length > 5) ? data.slice(0, 5): data;
        return {
            color: ['#1da7db', '#0dca91', '#e74658', '#a182fb', '#e3da48'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            textStyle: {
                color: '#9d9d9d'
            },
            yAxis : [
                {
                    type : 'category',
                    data : data.map((v, k) => {
                        return v.title.slice(0, 5);
                    })
                }
            ],
            xAxis : [
                {
                    type : 'value'
                }
            ],
            toolbox: {
                show: true,
                orient: 'horizontal',
                top: 5,
                right: 5
            },
            series : [
                {
                    name: '商品销量统计',
                    type: 'bar',
                    data: data.map((v, k) => {
                        return v.count;
                    })
                }
            ]
        };
    }

    componentDidMount() {
        this.myChart = echarts.init(document.getElementById('goods-statistic-pie-chart'));
        this.myChart.setOption(this.getOptions());
    }

    componentDidUpdate() {
        // console.log('ChannelStatisticPieChart:', this.props.trades);
        this.myChart.setOption(this.getOptions());
    }

    render() {
        return (
            <div id="goods-statistic-pie-chart"></div>
        );
    }

}

GoodsStatisticBarChart.propTypes = {
    trades: React.PropTypes.array
};

export default GoodsStatisticBarChart;